<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody">
			<scroll-view  :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
				<view v-for="(item,index) in shuju"  class="myview scroll-view-item uni-bg-red" @tap="tiaozhuaninfo(item.id)">
					<image class="myimg" mode="aspectFit" :src="item.img"></image>
					<text class="mywenzi">{{item.brief}}</text>
				</view>
			</scroll-view>
							<ourLoading isFullScreen active text="加载中..." v-if="loadings" />
		</view>
	</gracePage>
</template>

<script>
	import gracePage from "../../graceUI/components/gracePage.vue";
	export default {
		data(){
			return {
				button_color:'',//按钮颜色
				scrollTop:50,
				old: {
				                scrollTop: 0
				            },
				page:1,
				loadings:false,
				lowers:50,
				shuju:[]
			}
		},
		onLoad() {
			this.getData();
		},
		methods:{
			lower: function(e) {
			            console.log(e)
						console.log('拉到底了')
						this.getData()
			        },
			getData:function(){
				var vm = this;
				var page = this.page
				if(page==0){
					uni.showToast({
						title:'没有更多了',
						icon:'none'
					})
					return
				}
				vm.loadings = true;
				vm.myPost('api/Mycourse/get_list',{page:page},function(res){
					vm.loadings = false;
					console.log(res);
					if(res.code==200){
						var shuju = res.data.data
						if(shuju.length==0){
							vm.page = 0
						}else{
							vm.page = page+1
						}
							vm.shuju = vm.shuju.concat(res.data.data);
					}
				})
			},
			tiaozhuaninfo:function(id){
				console.log(id)
				uni.navigateTo({
					url:'/pages/jiaochen/course_info?id='+id
				})
			}
		},
		components:{
			gracePage
		}
	}
	
</script>

<style>
	::-webkit-scrollbar {
	width: 0;
	height: 0;
	background-color: transparent;
	}
	.scroll-Y{
		height: 1250rpx;
	}
	.myview{
		width: 90%;
		height: 200rpx;
		float: left;
		margin-top: 20rpx;
		margin-left: 35rpx;
		background: #FFFFFF;
	}
	.myimg{
		width: 200rpx;
		height: 200rpx;
		position: absolute;
		left: 60rpx;
	}
	.mywenzi{
		position: absolute;
		left: 280rpx;
		width: 400rpx;
		margin-top: 35rpx;
	}
</style>
